<template>
  <h1>个人简历练习</h1>
  <table border="1">
    <tr>
      <td>照片：</td>
      <td>
        <img :src="person.photo" width="120"></img>
      </td>
    </tr>
    <tr>
      <td>姓名：</td>
      <td>
        {{person.name}}
      </td>
    </tr>
    <tr>
      <td>年龄：</td>
      <td>
        {{person.age}}
      </td>
    </tr>
    <tr>
      <td>好友：</td>
      <td>
        <ul v-for="(item,index) in person.friends">
          <li>{{item}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="loadDate">加载数据</button>
</template>


<script setup>
import {ref} from "vue";

const person = ref({
  photo: "",
  name: "",
  age: '',
  friends: []
})

const loadDate = () => {
  person.value = {
    photo: 'imgs/fcq.jpg',
    name: "李四",
    age: 18,
    friends: ["张三", "王五"]
  }
}
</script>


<style scoped>

</style>
